<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>登录</title>
		<meta http-equiv="x-dns-prefetch-control" content="on">
		<link rel="dns-prefetch" href="http://pic.c-ctrip.com">
		<link rel="dns-prefetch" href="http://res.m.ctrip.com">
		<link rel="dns-prefetch" href="http://images4.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webresource.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webapi.amap.com">
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			html,
			body,
			div,
			span,
			ul li,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			a,
			form,
			footer,
			header,
			{
				margin: 0;
				padding: 0;
				border: 0;
				list-style: ;
				vertical-align: baseline;
			}
			
			body {
				background: url(../styles/images/login-bg1.png) no-repeat 0 0;
				background-size: cover;
			}
			
			.login-header {
				position: fixed;
				top: 0;
				right: 0;
				left: 0;
				z-index: 10;
				height: 2.2rem;
				padding-right: 0.5rem;
				padding-left: 0.5rem;
			}
			
			.login-header h1 {
				color: #fff;
				position: absolute;
				display: block;
				width: 100%;
				padding: 0;
				margin: 0 -0.5rem;
				font-size: 0.85rem;
				font-weight: 500;
				line-height: 2.2rem;
				text-align: center;
				white-space: nowrap;
			}
			
			.login-header a {
				height: 2.2rem;
				line-height: 2.2rem;
			}
			
			.login-wrap {
				display: flex;
				flex-direction: column;
				padding: 0 2.5rem;
			}
			
			.login-container {
				margin-top: 5rem;
			}
			
			input[type="text"],
			input[type="password"] {
				outline: none;
				font-size: 0.6rem;
				font-weight: 400;
				color: #ccc;
				border: none;
				width: 100%;
				height: 1.65rem;
				padding: 0 0.4rem;
				text-align: right;
				display: inline-block;
				background: transparent;
				margin-bottom: 0;
			}
			
			input::-webkit-input-placeholder {
				color: #ccc;
			}
			
			.icon1 {
				margin: 0 0 0.9rem;
				border-bottom: 1px solid #ccc;
			}
			
			.login-container input[type="text"] {
				background: url(../styles/images/username.png) no-repeat 0.25rem 0.25rem;
			}
			
			.login-container input[type="password"] {
				background: url(../styles/images/password.png) no-repeat 0.25rem 0.25rem;
			}
			
			.login-btn {
				margin: 4.1rem 0 0;
				text-align: center;
			}
			
			.login-btn input {
				width: 100%;
				color: #fff;
				padding: 0.5rem 0.75rem;
				border: none;
				border-radius: 0.25rem;
				background-color: rgba(255, 255, 255, 0.4);
				margin-bottom: 0.7rem;
			}
			
			.input[type="submit"] {
				font-size: 0.6rem;
				letter-spacing: 0;
				text-transform: uppercase;
				letter-spacing: 0.1rem;
				outline: none;
				margin: 2.25rem auto 1.5rem;
				transition: 0.5s all;
				-webkit-transition: 0.5s all;
			}
			
			.link {
				text-align: center;
			}
			
			.link span {
				font-size: 0.6rem;
			}
			
			.link a {
				color: #fff;
			}
			
			.forget {
				padding-right: 0.5rem;
				border-right: 1px solid #fff;
			}
			
			.reg {
				padding-left: 0.5rem;
			}
			
			.login-footer {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 4.8rem;
			}
			
			.login-footer ul {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				justify-content: space-around;
				padding: 0;
				margin-top: 3.75rem;
			}
			
			.login-footer ul li {
				list-style: none;
			}
			
			.login-footer span {
				color: #fff;
				font-size: 0.6rem;
				display: block;
			}
			.line:before,
			.line:after {
				content: "";
				height: 1px;
				background-color: #fff;
				position: absolute;
				top: 0.4rem;
				width: 25%;
			}
			
			.line:before {
				left: 0;
			}
			
			.line:after {
				right: 0;
			}
			
			/*.cooperation {
				width: 100%;
				height: 15px;
				position: absolute;
				top: 0;
			}
			
			.line {
				width: 28%;
				height: 1px;
				border-bottom: 1px dashed #fff;
			}
			
			.cooperation .line, .cooperation span {
				display: inline-block;
				vertical-align: middle;
			}
			
			.cooperation span{
				width: 40%;
				text-align: center;
			}*/
		</style>
	</head>

	<body>
		<header class="login-header">
			<h1>登录</h1>
			<a href="#">
				<img src="../styles/images/back-icon.png" />
			</a>
		</header>
		<div class="login-wrap">
			<div class="login-container">
				<form id="login" action="" method="post">
					<div class="icon1">
						<i class="fa fausername"></i>
						<input type="text" placeholder="请输入手机号码" required />
					</div>
					<div class="icon1">
						<i class="fa fapassword"></i>
						<input type="password" placeholder="6-12位数字或字母" required />
					</div>
					<div class="login-btn">
						<input type="submit" value="登录">
					</div>
				</form>
				<div class="link">
					<span class="forget"><a href="#">忘记密码</a></span>
					<span class="reg"><a href="#">注册账号</a></span>
				</div>
			</div>
			<div class="login-footer">
				<div class="cooperation">
					<!--<div class="line"></div>
					<span>使用合作账号登录</span>
					<div class="line"></div>-->
					<span class="line">使用合作账号登录</span>
				</div>
				<ul>
					<li class="wechat">
						<a>
							<img src="../styles/images/wechat.png" />
							<span>微信</span>
						</a>
					</li>
					<li class="QQ">
						<a>
							<img src="../styles/images/QQ.png" />
							<span>QQ</span>
						</a>
					</li>
					<li class="weibo">
						<a>
							<img src="../styles/images/weibo.png" />
							<span>微博</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>